<template>
	<view class="all">
		<view class="body">

			<view class='top'>
				<view class='top_left'>
					<view class='top_big_info'>
						<text class='temperature'>27℃</text>
						<text class='city'>城市: 建邺区</text>
					</view>
					<view class='top_small_info'>
						<view>
							<text class='humidity'>湿度: 56%</text>
							<text class='weather'>天气: 多云</text>
						</view>
						<text class='winddirection'>风向: 北风</text>
						<text class='windpower'>风力: ≤3级</text>
					</view>
				</view>
				<view class='top_right'>
					<view class='start'>
						<image src='/static/icons/start.png' />
					</view>
				</view>
			</view>
			<view class="tabs">
				<u-tabs-swiper ref="tabs" name="roomName" font-size="36" bar-width="70" inactive-color="#666"
					:list="rooms" :current="current" @change="tabsChange" swiperWidth="750"
					:is-scroll="rooms.length > 4" bg-color="none"></u-tabs-swiper>
				<image src="../../static/icons/tianjia.png"></image>
			</view>

			<view class="swiper">
				<swiper :current="swiperCurrent" @transition="transition" @change="swiperChange"
					@animationfinish="animationfinish">
					<swiper-item class="swiper-item" v-for="(item, index) in productsList" :key="index">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom"
							:data-productId="item.productId">
							<view class="device_list">
								<view class="device_item" v-for="(item2,index2) in deviecesList">
									<view class="device_content" @click="deviceData" :data-device="item2" 
										:data-apiKey="item.apiKey">
										<view class="item_top">{{ item2.deviceName }}</view>
										<view class="item_middle">
											<view class="device_img_box">
												<image class="device_img" src="../../static/icons/PM2.5.png"></image>
											</view>

										</view>
										<view class="item_bottom">
											<text v-if="item2.netStatus === 1" style="color: #18B566;">在线</text>
											<text v-if="item2.netStatus === 2" style="color: #DD6161;">离线</text>
											<text v-if="item2.netStatus == null " style="color: #82848A;">未激活</text>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view>
			<u-tabbar active-color="#0000ff" inactive-color="#000000" :list="list" :mid-button="true"></u-tabbar>
		</view>
	</view>


</template>

<script>
	const {
		request
	} = require('../../services/request.js');
	const {
		list
	} = require('../../utils/tabbar.js');

	export default {
		data() {
			return {
				rooms: [{
						id: 0,
						roomName: '全部'
					},
					{
						id: 1,
						roomName: '客厅'
					},
					{
						id: 2,
						roomName: '主卧'
					},
					{
						id: 3,
						roomName: '侧卧'
					}
				],
				productsList: [],
				deviecesList: [],
				userInfo: {},
				isLogin: false,
				current: 0,
				swiperCurrent: 0,
				searchValue: '',
				pageNow: '',
				pageSize: '',
				list,
				// isCreated:false
			}
		},
		onLoad() {

		},
		onShow() {
			this.getProducts();
			// this.isCreated = uni.getStorageSync('isCreated') || false;
		},
		methods: {
			async getProducts() {
				const res = await request('/aep_product_management/products', 'GET', 20190507004824, {
					searchValue: '',
					pageNow: '',
					pageSize: ''
				});
				this.productsList = res.data.result.list;
				const reson = await request('/aep_device_management/devices', 'GET', 20190507012134, {
					MasterKey: this.productsList[this.current].apiKey,
					productId: this.productsList[this.current].productId,
					searchValue: '',
					pageNow: '',
					pageSize: ''
				})
				this.deviecesList = reson.data.result.list;

			},
			// tabs通知swiper切换
			async tabsChange(index) {
				this.swiperCurrent = index;
				const reson = await request('/aep_device_management/devices', 'GET', 20190507012134, {
					MasterKey: this.productsList[index].apiKey,
					productId: this.productsList[index].productId,
					searchValue: '',
					pageNow: '',
					pageSize: ''
				})
				this.deviecesList = reson.data.result.list

			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);

			},

			async swiperChange(e) {
				const reson = await request('/aep_device_management/devices', 'GET', 20190507012134, {
					MasterKey: this.productsList[e.detail.current].apiKey,
					productId: this.productsList[e.detail.current].productId,
					searchValue: '',
					pageNow: '',
					pageSize: ''
				})
				this.deviecesList = reson.data.result.list
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			// onreachBottom(e) {
			// 	console.log(e)
			// },

			deviceData(e) {
				uni.navigateTo({
					url: '../deviceData/pm25/pm25',
					animationType: 'pop-in',
					animationDuration: 200,
					success(res) {
						res.eventChannel.emit('getDeviceId', {
							...e.currentTarget.dataset.device,
							...e.currentTarget.dataset
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background-color: #fafafa;

		.all {
			height: 100%;

			.body {
				height: calc(100% - 220rpx);
			}
		}
	}


	// .top {
	// 	width: 100%;
	// 	border-radius: 0 0 30rpx 30rpx;
	// 	box-shadow: 0 4rpx 8rpx #00BFFF;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;

	// 	image {
	// 		border-radius: 0 0 30rpx 30rpx;
	// 		width: 100%;
	// 	}
	// }

	// .login {
	// 	width: 90%;
	// 	margin: 0rpx auto -50rpx;
	// 	height: 250rpx;
	// 	border-radius: 30rpx;
	// 	box-shadow: 0 4rpx 10rpx #e2e2e2;
	// 	background-color: #FFFFFF;
	// 	transform: translateY(-90rpx);
	// 	display: flex;
	// 	align-items: center;

	// 	.userimg {
	// 		width: 180rpx;
	// 		height: 180rpx;
	// 		border-radius: 50%;
	// 		box-shadow: 0 0 10rpx #e3e3e3;
	// 		margin: 0 50rpx;

	// 		image {
	// 			width: 100%;
	// 			height: 100%;
	// 			border-radius: 50%;
	// 		}
	// 	}

	// 	.username {
	// 		display: block;
	// 		font-size: 56rpx;
	// 	}

	// 	.notLogin {
	// 		width: 100%;
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: center;
	// 		align-items: center;

	// 		.text {
	// 			flex: 1;
	// 			padding: 30rpx 0;
	// 			font-size: 32rpx;
	// 		}

	// 		.btn {
	// 			flex: 1;
	// 			width: 40%;

	// 			button {
	// 				display: block;
	// 				border-radius: 30rpx;
	// 			}
	// 		}
	// 	}

	// }
	.top {
		display: flex;
		justify-content: space-around;
		background-color: skyblue;
		background-image: linear-gradient(to bottom right, skyblue, blue);
		// background-image: linear-gradient(120deg, deepskyblue, #9ae1a0);
		padding: 30rpx 0;
		border-radius: 0 0 25rpx 25rpx;
		color: #ffffff;
		height: 320rpx;
	}

	.top .top_left {
		width: 420rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.top .top_left .top_big_info {
		padding: 10rpx 0;
	}

	.top .top_left .top_small_info {
		padding: 10rpx 20rpx;
		font-size: 30rpx;
	}

	.temperature {
		font-size: 60rpx;
		display: inline-block;
		padding: 0 20rpx;
	}

	.humidity::after {
		content: '|';
		width: 55rpx;
		display: inline-block;
		text-align: center;
		color: rgba(255, 255, 255, .5);
	}

	.winddirection::after {
		content: '|';
		width: 55rpx;
		display: inline-block;
		text-align: center;
		color: rgba(255, 255, 255, .5);
	}

	.top .top_right {
		width: 250rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top .top_right .start {
		position: relative;
		width: 220rpx;
		height: 220rpx;
		animation: move 4s linear infinite;
	}

	.tabs {
		display: flex;
		align-items: center;
	}

	.tabs>image {
		width: 48rpx;
		height: 48rpx;
		margin-left: 100rpx;
	}

	@keyframes move {
		0% {
			top: 0rpx
		}

		25% {
			top: -30rpx
		}

		50% {
			top: 0rpx
		}

		75% {
			top: 30rpx
		}

		100% {
			top: 0rpx
		}
	}

	.top .top_right .start image {
		width: 100%;
		height: 100%;
	}


	swiper {
		height: 100%;
	}

	.body {
		height: 100%;
		display: flex;
		flex-direction: column;

		.swiper {
			flex: 1;
		}
	}

	.device_list {
		width: 100%;
		padding: 30rpx;
		display: flex;
		flex-wrap: wrap;

		.device_item {
			width: 50%;
			padding: 30rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;

			.device_content {
				width: 300rpx;
				// height: 200rpx;
				box-shadow: 0 5rpx 10rpx #bfbfbf;
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				background-color: #FFFFFF;

				.item_top {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					// background-color: #0000ff;
					background-image: linear-gradient(to bottom right, skyblue, blue);
					// background-image: linear-gradient(120deg, deepskyblue, #9ae1a0);
					border-radius: 15rpx 15rpx 0 0;
					padding: 0 15rpx;
					color: #FFFFFF;
				}

				.item_middle {

					display: flex;

					.device_img_box {
						width: 100rpx;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 15rpx;

						.device_img {
							width: 88rpx;
							height: 88rpx;
						}

						.device_status {}
					}
				}

				.item_bottom {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					// background-color: #19BE6B;
					// border-radius: 0 0 15rpx 15rpx;
					padding: 0 30rpx;
					// color: #FFFFFF;
				}
			}
		}

	}
</style>
